<template>
<!--  查询账务记录头部的组件-->
<div style="display: flex">
  <div style="width: 100%">
    <el-button type="text" @click="dialogVisible = true">条件查询选择窗口</el-button>
    <el-dialog
      title="条件查询"
      :visible.sync="dialogVisible"
      top="20vh"
      width="53%"
      >
      <div style="display: flex;flex-wrap: wrap">
        <div>
          <span style="margin-top: 4px;font-size: 17px">支付/收款时间&nbsp;:&nbsp;</span>
          <el-date-picker

            v-model="selectMsg.timeZone"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions">
          </el-date-picker>
        </div>
        <div style="margin-left:30px">
          <span style="margin-top: 4px;font-size: 17px">账务大类&nbsp;:&nbsp;</span>
          <el-select v-model="selectMsg.bigAccountId" @change="changeBigAccount"    style="width: 150px">
            <el-option
              v-for="item in bigAccountList"
              :key="item.bigAccountId"
              :label="item.bigAccountName"
              :value="item.bigAccountId">
            </el-option>
          </el-select>
        </div>
        <div style="margin-top: 15px;margin-left: 73px">
          <span style="margin-top: 4px;font-size: 17px">类型&nbsp;:&nbsp;</span>
          <el-select v-model="selectMsg.way" @change="changeType"  style="width: 150px">
            <el-option label="所有类型" :value=0 ></el-option>
            <el-option label="支出" :value=1 ></el-option>
            <el-option label="收入" :value=2></el-option>
          </el-select>
        </div>

        <div style="margin-top: 15px;margin-left: 230px">
          <span style="margin-top: 4px;font-size: 17px">账务小类&nbsp;:&nbsp;</span>
          <el-select v-model="selectMsg.smallAccountId" @change="changeSmallAccount"  style="width: 150px">
            <el-option
              v-for="item in smallAccountList"
              :key="item.smallAccountId"
              :label="item.smallAccountName"
              :value="item.smallAccountId">
            </el-option>
          </el-select>
          </div>
        <div style="margin-top: 15px">
          <span style="margin-top: 4px;font-size: 17px">支付/收款方式&nbsp;:&nbsp;</span>
          <el-select v-model="selectMsg.payOrTakeWay"   style="width: 150px">
            <el-option
              v-for="item in payOrTakeWayList"
              :key="item.payTakeId"
              :label="item.payTakeName"
              :value="item.payTakeId">
            </el-option>
          </el-select>
        </div>
        <div style="margin-top: 15px;margin-left: 185px">
          <span style="margin-top: 4px;font-size: 17px">对方名称:&nbsp;</span>
          <el-input clearable style="width: 200px" v-model="selectMsg.who"></el-input>
        </div>

      </div>

      <span slot="footer" class="dialog-footer">
    <el-button type="danger"   @click="restartMsg">重 填</el-button>
    <el-button type="primary" @click="selectMsgWay">查 询</el-button>
  </span>
    </el-dialog>
  </div>
</div>
</template>

<script>
import {get} from "../../utils/request";
import {ACCOUNT_RECORDING_DATA} from "../../utils/basic-data";

export default {
  name: "SelectByCondition",
  data(){
    return{
      payOrTakeWayList:[],
      bigAccountList:[],
      smallAccountList:[],
      dialogVisible: false,
      selectMsg:{
        currentPage:1,
        pageSize:ACCOUNT_RECORDING_DATA,
        way:0,
        payOrTakeWay:null,
        bigAccountId:null,
        smallAccountId:null,
        timeZone:null,
        who:null,
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    }
  },
  mounted() {
    get("/api/v1/paytake/find/all").then(resp=>{
      this.payOrTakeWayList=resp.data
      this.payOrTakeWayList.unshift({payTakeId: 0,payTakeName:'所有方式'})
      this.selectMsg.payOrTakeWay=0
    })
    get("/api/v1/bigaccount/special").then(resp=>{
      this.bigAccountList=resp.data
      this.bigAccountList.unshift({bigAccountId: 0,bigAccountName:'所有大类',isPayOrTake:0})
      this.selectMsg.bigAccountId=0
    })
    get("/api/v1/smallaccount/special").then(resp=>{
      this.smallAccountList=resp.data
      this.smallAccountList.unshift({smallAccountId: 0,bigAccountId: 0,smallAccountName:'所有小类'})
      this.selectMsg.smallAccountId=0
    })
  },
  methods:{
    selectMsgWay(){
      this.dialogVisible=false
      this.$emit("selectMsgWay",this.selectMsg)
    },
    restartMsg(){

      this.selectMsg.timeZone=null;
        this.changeType(0)
        this.selectMsg.way=0
      this.selectMsg.payOrTakeWay=0
        this.selectMsg.who=null
    },
    changeType(value){

      get('/api/v1/bigaccount/special',{isPayTakeId:value}).then(resp=>{
        this.bigAccountList=resp.data
        this.bigAccountList.unshift({bigAccountId: 0,bigAccountName:'所有大类',isPayOrTake:0})
        this.selectMsg.bigAccountId=this.bigAccountList[0].bigAccountId
      })
      get('/api/v1/smallaccount/special/two',{isPayTakeId:value}).then(resp=>{
        this.smallAccountList=resp.data
        this.smallAccountList.unshift({smallAccountId: 0,bigAccountId: 0,smallAccountName:'所有小类'})
        this.selectMsg.smallAccountId=this.smallAccountList[0].smallAccountId

      })
    },

    changeBigAccount(value){
      get('/api/v1/smallaccount/special',{bigAccountId:value}).then(resp=>{
        if (resp.data.length===0){
          this.selectMsg.smallAccountId=null
          this.smallAccountList=0
          this.selectMsg.way=null
        }else {
          this.smallAccountList=resp.data
          this.selectMsg.way=null
          this.smallAccountList.unshift({smallAccountId: 0,bigAccountId: 0,smallAccountName:'所有小类'})
          this.selectMsg.smallAccountId=this.smallAccountList[0].smallAccountId
        }
      })

    },
    changeSmallAccount(value){
      this.selectMsg.way=null,
        this.selectMsg.bigAccountId=null
    }
  }
}
</script>

<style scoped>

</style>
